<template>
  <div class="resgiter">
    <div class="resgiter-content">
      <img src="../../assets/images/login_left.png" alt="" srcset="" style="height: 100%;" class="login-left">
      <div class="resgiter-form">
        <div style="width: 100%;">
          <div class="tabs-labels">
            <span>账号注册</span>
          </div>
          
          <el-form
            ref="resgiterFormRef"
            :model="resgiterForm"
            :rules="rules"
            class="demo-ruleForm"
            status-icon
          >
            <el-form-item prop="loginname">
              <el-input v-model="resgiterForm.loginname" placeholder="请输入登录名" :prefix-icon="User"></el-input>
            </el-form-item>

            <el-form-item prop="password">
              <el-input v-model="resgiterForm.password" placeholder="请输入密码" :prefix-icon="Lock" show-password></el-input>
            </el-form-item>

            <el-form-item prop="name">
              <el-input v-model="resgiterForm.name" placeholder="请输入姓名" :prefix-icon="User"></el-input>
            </el-form-item>

            <el-form-item prop="phone">
              <el-input v-model="resgiterForm.phone" placeholder="请输入手机号码" :prefix-icon="PhoneFilled"></el-input>
            </el-form-item>

            <!-- <el-form-item prop="gender">
              <el-select v-model="resgiterForm.gender" placeholder="请选择性别" :prefix-icon="User" style="width: 100%;">
                <el-option label="男" :value="1" />
                <el-option label="女" :value="2" />
                <el-option label="未知" :value="3" />
              </el-select>
            </el-form-item> -->

            <!-- <el-form-item prop="roles">
              <el-input v-model="resgiterForm.roles" placeholder="请选择默认角色" :prefix-icon="User"></el-input>
            </el-form-item> -->
          </el-form>

          <div class="button-list">
            <el-button type="primary" round :loading="buttonLoading" @click="goLogin">返回登录</el-button>
            <el-button type="primary" round @click="resgiterDo" :loading="buttonLoading">注册</el-button>
          </div>
          
        </div>
        <img src="../../assets/images/login_right.png" alt="" style="width: 80px; position: absolute; right: 0; bottom: 85px;">
      </div>
    </div>
  </div>
</template>

<script>
export default { name: 'resgiter' }
</script>
<script setup>
import { ref, reactive, onMounted, watch } from 'vue';
import { User, Lock, PhoneFilled } from '@element-plus/icons-vue'
import { useRouter } from 'vue-router'
import { ElMessage, ElMessageBox } from 'element-plus'
import { http } from '@/utils/http/index';
import { useAuthStore } from '@/stores/modules/auth.js'

/* 路由 */
const router = useRouter()

const authStore = useAuthStore()

/* 登录表单 */
const resgiterForm = ref({
  loginname: "",
  password: "",
})

const resgiterFormRef = ref(null)

/* 手机号码校验 */
const checkPhone = (rule, value, callback) => {
  const regPhone=/^1[3-9]\d{9}$/
  if (resgiterForm.value.phone) {
    if (!regPhone.test(resgiterForm.value.phone)) {
      callback(new Error('请输入正确格式的电话号码'))
    } else {
      callback()
    }
  } else {
    callback()
  }
}

/* 校验规则 */
const rules = ref({
  loginname: [
    { required: true, message: '请填写用户名', trigger: 'blur' }
  ],
  password: [
    { required: true, message: '请填写密码', trigger: 'blur' }
  ],
  name: [
    { required: true, message: '请填写姓名', trigger: 'blur' }
  ],
  phone: [
    { required: true, message: '请填写手机号码', trigger: 'blur' },
    { message: '请输入正确格式的电话号码', trigger: 'blur', validator: checkPhone }
  ],
  gender: [
    { required: true, message: '请选择性别', trigger: 'blur' }
  ],
})

const buttonLoading = ref(false)

/* 注册 */
const resgiterDo = () => {
  resgiterFormRef.value.validate((valid, fields) => {
    if(valid) {
      /**清除之前的记录 */
      authStore.cleanAuthInfo()

      buttonLoading.value = true

      let params = JSON.parse(JSON.stringify(resgiterForm.value))
      params.roles = '3'
      params.orgId = '0'
      params.orgName = "水利厅"

      /* 提交注册 */
      http.$POST("/Home/RegisterDo", params).then(res => {
        if(res.isError) {
          buttonLoading.value = false
          return ElMessage.warning(res.message)
        }

        ElMessage.success("注册成功")

        /* ElMessage({
          showClose: true,
          message: '注册成功，即将跳转登录',
          type: 'success',
          duration: 1000,
          onClose : () => {
            router.push({
              path: '/Home/Login',
              query: router.currentRoute.value.query ? router.currentRoute.value.query : {}
            })
          }
        }) */

        /* 处理自动登录 */
        let loginParams = {
          LoginName: params.loginname,
          PassWord: params.password,
          ReturnUrl: router.currentRoute.value.query.RedirectUri ? router.currentRoute.value.query.RedirectUri : '/'
        }

        const formData = new FormData()
        for(let k in loginParams) {
          formData.append(k ,loginParams[k])
        }

        http.$POST("/Home/LoginDo", formData).then(_res_ => {
          buttonLoading.value = false
          if(_res_.isError) return ElMessage.warning(_res_.message)

          /* 设置用户信息 */
          authStore.getUserInfo(_res_.result)
          
          http.$GET("/RoleAction/GetActionTreeByApplicationIdAndUserId", { appId: '1759745808535691264', uid: _res_.result.id }).then(_res => {

            /* 设置权限 */
            authStore.getUserPermission(_res.result.content)

            if(router.currentRoute.value.query.AppId) {
              router.push({
                path: '/Home/empower',
                query: router.currentRoute.value.query
              })
            } else {
              if(router.currentRoute.value.query.RedirectUri) {
                window.open(router.currentRoute.value.query.RedirectUri, "_self")
              } else {
                window.open("http://113.57.190.37:9000/expert", "_self")
              }
            }
          })
        })
      })
    } else {
      ElMessage.warning("请先完成必填项")
    }
  })
}

/* 注册成功，跳转登录 */
const goLogin = () => {
  router.push({
    path: '/Home/Login',
    query: router.currentRoute.value.query ? router.currentRoute.value.query : {}
  })
}

</script>

<style lang='scss' scoped>
.resgiter {
  width: 100%;
  height: 100vh;
  overflow: hidden;
  background: url("../../assets/images/login_bg.png");
  background-size: 100%;
  display: flex;
  justify-content: center;
  align-items: center;

  .resgiter-content {
    max-width: 1128px;
    background: #ffffff;
    height: 720px;
    border-radius: 31px;
    display: flex;
    position: relative;
  }

  .resgiter-form {
    display: flex;
    justify-content: center;
    width: 668px;
    height: 100%;
    text-align: center;
    padding: 40px 90px 40px 104px;
    overflow: auto;
    background: #fff;
    border-radius: 15px;
  }

  .tabs-labels {
    margin: 40px 0;
    span {
      display: inline-block;
      width: 50%;
      color: #999999;
      font-size: 30px;
      cursor: pointer;
      padding-bottom: 10px;
    }

    .active {
      border-bottom: 3px solid #7478D3;
    }
    
  }

  .hbzw-images{
    img {
      margin: 20px;
      outline-offset: 20px;
      outline: 1px solid #cccccc;
    }
    
  }

  :deep(.el-input) {
    height: 48px;
    line-height: 48px;
    font-size: 18px;
  }

  :deep(.el-input__wrapper) {
    background-color: #F5F5F5;
    border-radius: 40px;
    box-shadow: none;
    padding-left: 40px;
  }

  :deep(.el-input__wrapper.is-focus, .el-input__wrapper:hover) {
    box-shadow: none;
  }

  :deep(.el-form-item__error){
    left: 20px;
  }

  .button-list {
    display: flex;
  }

  :deep(.el-button) {
    width: 50%;
    height: 48px;
    line-height: 48px;
    color: #FFFFFF;
    background: #7377D2;
    border-color: #7377D2;
    font-size: 22px;
    margin-top: 100px;
  }
}

@media screen and (max-width : 1000px) {
  .resgiter-form {
    width: 100% !important;
    position: absolute;
    top: 0;
    left: 0;
    border-radius: 15px !important;
  }
  .login-left{
    border-radius: 15px !important;
  }
}
</style>